<template>
  <div class="wrapper">
    <el-menu
      :default-active="form"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <el-menu-item v-for="item in children" :index="item.path">
        <span>{{ item.name }}</span>
      </el-menu-item>
      <!-- <el-menu-item index="tab2">
        <span>Navigator Three</span>
      </el-menu-item>
      <el-menu-item index="tab3">
        <span>Navigator Four</span>
      </el-menu-item> -->
    </el-menu>
    <div class="main">
      <RouterView />
    </div>
  </div>
</template>

<script setup>
import { RouterView } from "vue-router";
import { routes } from "../router";
let children = routes[0].children;
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  background-color: white;
  .el-menu {
    width: 240px;
    height: 100vh;
    background-color: #d3e6ba;
    border-right: 1px solid #e5e5e5;
  }

  .main {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    padding: 3px;
    width: 100%;
    overflow-x: hidden;
  }
}
</style>
